<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="zw.jpg" alt="" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4240646349,2202434056&fm=15&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3773784996,892159904&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3449787270,571548566&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1150984156,223874937&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3035016054,132036460&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2550322333,3364816417&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=430949367,1523523039&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1046867108,3900197836&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3767276812,1438033240&fm=26&gp=0.jpg">
    <img src="zw.jpg" alt="" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3711165554,3457951396&fm=26&gp=0.jpg">
    <script>
        let imgList = [...document.querySelectorAll('img')]
        let length = imgList.length;
        function imgLazyload() {
            let count = 0; // 有几张图片被加载了
            return function() {
                let deleteIndexList = [];
                imgList.forEach((img,index) => {
                    let rect = img.getBoundingClientRect()
                    if(rect.top < window.innerHeight) {
                        img.src = img.dataset.src;
                        deleteIndexList.push(index);
                        count++;
                        if(count === length) {
                            document.removeEventListener('scroll',imgLazyload)
                        }
                    }
                })
                imgList = imgList.filter((img,index) => !deleteIndexList.includes(index))
            }
        }
        document.addEventListener('scroll',imgLazyload());
    </script>
</body>
</html>